<template>
    <h3>单文件组件</h3>
    <pre class="note">
        Vue工程环境中，提供一个特殊的构成文件 .vue；
        该文件在vue项目中被叫做单文件组件配置文件(单文件组件) = SFC 系统完成组件配置的定义文件
        单文件组件主要有三个部分构成： template  script  style 
            => template 用于定义vue组件配置对应的 模板
            => sctipt 提供组件构建时所描述的相关JS功能
            => style 定义组件模板关联的对应的样式
        
        .vue 文件使用独立的渲染工具进行vue组件配置转换（vue-loader.js vue-template-es2015-compiler.js）
            => 工程化项目中加载的Vue不具有模板编译功能(runtime文件),所有vue的工程环境中只能通过 render 函数提供组件模板
            => vue-loader.js 为vue工程化项目提供.vue文件的加载操作
            => vue-template-es2015-compiler.js 为vue工程化项目提供 .vue 文件的编译操作
                1、template编译成当前.vue文件 export default 的 render 配置
                    + 组件标签名支持驼峰写法
                    + 标签语法校验更加严格
                2、加载style交由css-loader编译成全局样式，自动载入到模板html文件中
                3、script 中的JS代码分两块区域进行编译加载
                    + export default 以外的代码，会被编译成 全局JS代码完成加载
                    + export default 作为组件配置对象进行模块值的返回
        
        单文件组件的使用注意事项
            => template 标签只能出现一个
            <img src="../../assets/error/01.png" alt="" srcset="">
            => vue2.0 script 标签可以存在多个，但只能存在一个 export default
            vue3.0 script 标签只能存在一个，export default只能存在一个
            <img src="../../assets/error/02.png" alt="" srcset="">
            <img src="../../assets/error/03.png" alt="" srcset="">
            => style 标签可以出现多个
    </pre>
</template>

<!-- <template>
    <h4>测试数据</h4>
</template> -->

<!-- <script>
let a = 1;
</script> -->

<script>
// export default {}
export default {
    
}
</script>

<style>
h1{
    color: red;
}
</style>
<style>
h2{
    color: blue;
}
</style>